<template>
	<view class="my_box">
		<view v-if="stuCardList.length > 0" class="card_box">
			<swiper class="swiper" :indicator-dots="stuCardList.length > 1" >
				<swiper-item v-for="item in stuCardList" :key="item.cardNo" class="swiper-item">
					<view class="info_card">
						<view class="name_no">
							<view class="stu_name">
								{{item.empName}}
							</view>
							<view class="card_no">
								NO.{{item.cardNo}}
							</view>
						</view>
						<view class="balance_box">
							<text class="hint_text">卡内余额（元）</text>
							<text class="balance">
								{{item.wallets[0].balance}}
							</text>
						</view>
						<view class="org_name">
							{{item.orgName}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="my_box_box">
			<view class="my_box_top" v-for="(item, index) in milkMenuList" :key="index"
				@click="jumpSwitch(item)">
				<view class="avatoa">
					<image :src="item.btnImg" class="imgava"></image>
					<text class="my_txt">{{item.btnName}}</text>
				</view>
				<view class="icon_right">
					<text v-if="item.btnName == '消息中心' && loginFlag && geList.length > 0 && readNum>0"
						:class="readNum.length == 2 ? 'readConts' : 'readCont'">{{readNum}}</text>
					<!-- <view> -->
					<image class="arrow_icon" src="/static/images/me/to_right_icon.png" mode="scaleToFill"></image>
					<!-- </view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _this
	import {
		queryMilkCardBalance,
		queryMilkCard
	} from '../../common/api/index.js'
	export default {
		data() {
			return {
				isBinded: false,
				milkMenuList: [
					{
						btnName: '牛奶卡二维码',
						btnImg: '/static/images/milk/milkQrcode.png',
						path: '../qrcode/index?bindType=3'
					},
					{
						btnName: '牛奶卡充值',
						btnImg: '/static/images/milk/milkRecharge.png',
						path: '../card/carList?bindType=3',
						handle() {
							_this._milkRecharge()
						}
					},
					{
						btnName: '牛奶卡消费记录',
						btnImg: '/static/images/milk/milkRecords.png',
						path: '../card/carList?bindType=3&isExpense=1'
					},
					{
						btnName: '牛奶卡信息',
						btnImg: '/static/images/milk/milkInfo.png',
						path: '../card/dangan?bindType=3'
					},
					{
						btnName: '其他牛奶卡绑定',
						btnImg: '/static/images/milk/milkBind.png',
						path: ['../bind/bind', '../bindCard/bind']
					}, 	
					{
						btnName: '牛奶卡生物消费信息采集',
						btnImg: '/static/images/milk/milkFace.png',
						path: '../fixPortrait/index?bindType=3'
					},
				],
				stuCardList: [],
				stuList: []
			};
		},
		onLoad() {
			_this = this
			this._queryMilkCardBalance()
		},
		onShow() {
			this._queryMilkCard()
		},
		methods:{
			jumpSwitch(item){
				if (item.handle) {
					item.handle()
					return
				}
				uni.navigateTo({
					url: typeof item.path === 'string' ? item.path : this.isBinded ? item.path[1] : item.path[0]
				})
			},
			_milkRecharge(){
				let path = '../card/carList?bindType=3'
				if(this.stuCardList.length > 1){
					path = '../card/carList?bindType=3'
				}else {
					path = '../recharge/bindRecharge?objParams=' + encodeURIComponent(JSON.stringify(this.stuCardList[0].wallets[0])) + '&stuObj=' + encodeURIComponent(JSON.stringify(this.stuCardList[0]))
				}
				uni.navigateTo({
					url: path
				})
			},
			_queryMilkCardBalance() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let s_userId = uni.getStorageSync('s_userId')
				queryMilkCardBalance({
					userId: s_userId,
					queryCard: true,
					queryWallet: true,
					bindType: '3'
				}).then(res => {
					if (res.code == 0 ) {
						uni.hideLoading()
						if(res.data.orgs.length == 0 && res.data.students.length == 0){
							uni.showToast({
								icon: 'none',
								title: '您未绑定牛奶卡，请先进行牛奶卡绑定',
							})
							uni.reLaunch({
								url: '../bind/bind'
							})
						}else {
							this.isBinded = true
							// const stuList = res.data.students.filter(ite => ite.bindType === 3)
							// stuList.forEach(item => {
							// 	for (let i = 0,stu = item.students; i < stu.length; i++) {
							// 		stu.cards = stu.cards.filter(i => i.cardState == 0)
							// 		stuCardList.push()
							// 	}
							// })
						}
						// this.jumpSwitch('../bind/bind')
					}else {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '奶机构卡信息加载错误：' + res.msg || res.resultMsg
						})
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			_queryMilkCard() {
				this.stuCardList = []
				uni.showLoading({
					mask: true,
					title: '加载中,请稍后…'
				})
				let s_userId = uni.getStorageSync('s_userId')
				queryMilkCard({
					userId: s_userId
				}).then(res => {
					if(res.code == 0) {
						const stuList = res.data
						stuList.forEach(stu => {
							stu.studentCards = stu.studentCards.filter(item => item.cardState == 0)
							stu.studentCards.forEach(card => {
								card.wallets = card.wallets.filter(w => w.walletType == 1)
							})
							console.log(stu.studentCards)
							this.stuCardList.push(...stu.studentCards)
						})
						this.stuList = stuList
						uni.hideLoading()
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.my_box {
		// margin-top: 16rpx;
		height: 100vh;
		background-color: #f8f8f8;

		.my_box_box {
			display: flex;
			flex-direction: column;

			.my_box_top {
				min-height: 106rpx;
				padding: 24rpx 32rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				background-color: #ffffff;
				position: relative;

				&::after {
					content: "";
					height: 1px;
					transform: scaleY(0.5);
					background: #e6e6e6;
					position: absolute;
					right: 0;
					bottom: 0;
					left: 32rpx;
				}

				&:last-child::after {
					height: 0;
				}

				.avatoa {
					display: flex;
					align-items: center;

					.imgava {
						width: 48rpx;
						height: 48rpx;
						margin-right: 15rpx;
					}

					.my_txt {
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 30rpx;
						color: #000000;
					}
				}

				.icon_right {
					display: flex;
					flex-direction: row;
					align-items: center;

					.readConts {
						margin-right: 10rpx;
						background-color: #e02020;
						border-radius: 50%;
						padding: 5rpx;
						font-size: 24rpx;
					}

					.readCont {
						margin-right: 10rpx;
						background-color: #e02020;
						border-radius: 50%;
						color: #fff;
						width: 36rpx;
						height: 36rpx;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 36rpx;
						text-align: center;
					}

					.arrow_icon {
						display: inline-block;
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		
		.card_box{
			padding: 24rpx;
			.swiper-item{
				border-radius: 24rpx;
				overflow: hidden;
			}
			.info_card{
				padding: 36rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				height: 100%;
				justify-content: space-around;
				background-image: linear-gradient(rgba(18, 135, 239, 0.5), rgba(34, 88, 255, 0.5));
				.name_no{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.stu_name{
						font-size: 36rpx;
						font-weight: 700;
						color: #FFF;
					}
					.card_no{
						font-size: 24rpx;
						color: #ddd;
						text-shadow: 1px 1px 1px #ccc;
					}
				}
				.balance_box{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.hint_text{
						font-size: 24rpx;
						color: #FFF;
					}
					.balance{
						font-size: 64rpx;
						color: #FFF;
					}
				}
				.org_name{
					text-align: right;
					font-size: 28rpx;
					color: #FFF;
				}
			}
		}
	}
</style>
